<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:body>
	<ui:composition template="/WEB-INF/facelets/template.xhtml">

		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Loading"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="form">

					<p:growl id="msg2" autoUpdate="true" />

					<p:panel id="panelTipoSolicitud" header="Tipo Solicitud PQR">

						<h:panelGrid style="margin: 0 auto;">
							<p:dataTable id="tabla"
								value="#{tipoSolicitudPqrView.tipoDataModel}" var="tipo"
								selection="#{tipoSolicitudPqrView.selectedTipoSolicitudPqr}"
								paginator="true" rows="10">

								<f:facet name="header">
							    Tipo Solicitud
							    </f:facet>
								<p:column selectionMode="single" style="width:2%" />

								<p:column filterBy="#{tipo.descTpSol}"
									sortBy="#{tipo.descTpSol}">
									<f:facet name="header">
										<h:outputText value="Descripción" />
									</f:facet>
									<h:outputText value="#{tipo.descTpSol}" />
								</p:column>

								<p:column filterBy="#{tipo.estado}" sortBy="#{tipo.estado}">
									<f:facet name="header">
										<h:outputText value="Estado Registro" />
									</f:facet>
									<h:outputText value="#{tipo.estado}" />
								</p:column>

								<f:facet name="footer">
									<p:commandButton id="createButton" value="Crear"
										action="#{tipoSolicitudPqrView.crear}" icon="ui-icon-newwin"
										update=":form" binding="#{tipoSolicitudPqrView.btnCrear}"
										oncomplete="PF('singleCarDialog').show()" />

									<p:commandButton id="viewButton" value="Editar"
										action="#{tipoSolicitudPqrView.editar}" icon="ui-icon-pencil" 
										update=":form" binding="#{tipoSolicitudPqrView.btnModify}"
										oncomplete="PF('singleCarDialog').show()" />
								</f:facet>
							</p:dataTable>
						</h:panelGrid>

						<p:dialog id="dialogo" position="top" header="Detalle Tipo Solicitud"
							modal="true" widgetVar="singleCarDialog" resizable="false"
							showEffect="fade" hideEffect="explode" closable="false" style="width:350px">

							<p:growl id="msg" />

							<h:panelGrid id="panelBotones" columns="3"
								style="margin: 0 auto;">

								<p:commandButton id="btnGuardar" value="Guardar"
									action="#{tipoSolicitudPqrView.action_modify}"
									binding="#{tipoSolicitudPqrView.btnSave}" icon="ui-icon-disk"
									update="msg,panelBotones,msg2,panel" />

								<p:commandButton id="btnCerrar" value="Cerrar"
									icon="ui-icon-close" update=":form"
									oncomplete="PF('singleCarDialog').hide()" process="@this"
									actionListener="#{tipoSolicitudPqrView.cerrar}">
									<p:resetInput target="panel" />
								</p:commandButton>
								
								<p:commandButton id="btnLimpiar" value="Limpiar"
									icon="ui-icon-close" update=":form"
									oncomplete="PF('singleCarDialog').show()" process="@this"
									actionListener="#{tipoSolicitudPqrView.crear}">
									<p:resetInput target="panel" />
								</p:commandButton>

							</h:panelGrid>


							<h:panelGrid columns="6" style="margin: 0 auto;" id="panel">

								<h:outputText id="msgDescripcion" value=" Descripción: * " />
								<p:inputTextarea id="txtDescripcion" disabled="true"
									binding="#{tipoSolicitudPqrView.txtDescTpSol}" required="true"
									requiredMessage="La Descripción es obligatoria " maxlength="200"
									autoResize="false" rows="5" cols="40"/>
								<p:message for="txtDescripcion" display="icon" />

								<h:outputText id="msgEstadoRegistro"
									value=" Estado del Registro: *" />
								<p:selectOneRadio id="radioEstadoregistro" style="width:250px"
									binding="#{tipoSolicitudPqrView.txtEstadoRegistro}" required="true"
									disabled="true"
									requiredMessage="El Estado del Registro es obligatorio">
									<f:selectItem itemLabel="Activo" itemValue="A" />
									<f:selectItem itemLabel="Retirado" itemValue="R" />
								</p:selectOneRadio>
								<p:message for="radioEstadoregistro" display="icon" />

							</h:panelGrid>

							<h:panelGrid columns="2">

								<p:panel id="panelMotivoR" header="Motivo Reclamación">
									<p:pickList id="MotivoReclamacion"
										value="#{tipoSolicitudPqrView.motivoReclamacion}"
										var="motivoR" itemLabel="#{motivoR.descripcionMotRecl}"
										itemValue="#{motivoR}" converter="entityConverter">
										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Seleccionadas</f:facet>
									</p:pickList>
								</p:panel>

								<p:panel id="panelMotivoS" header="Motivo Solicitud">
									<p:pickList id="MotivoSolicitud"
										value="#{tipoSolicitudPqrView.motivoSolicitud}" var="motivoS"
										itemLabel="#{motivoS.descripcionMotSol}"
										itemValue="#{motivoS}" converter="entityConverter">
										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Seleccionadas</f:facet>
									</p:pickList>
								</p:panel>

								<p:panel id="panelAnexos" header="Anexos" >
									<p:pickList id="ListaAnexos" 
										value="#{tipoSolicitudPqrView.anexos}" var="anexoPQR"
										itemLabel="#{anexoPQR.descripcionAnexo}"
										itemValue="#{anexoPQR}" converter="entityConverter">
										<f:facet name="sourceCaption">Disponibles</f:facet>
										<f:facet name="targetCaption">Seleccionadas</f:facet>
									</p:pickList>
								</p:panel>

							</h:panelGrid>

						</p:dialog>

					</p:panel>

				</h:form>

			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>
